import React,{Component,Fragment} from 'react'
import { Input,Button, List} from 'antd';
import store from './store';
import 'antd/dist/antd.css'; 
// import {CHANG_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './store/actionTypes'
import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreator'

class TodoList extends Component{

    constructor(props){
        super(props);
        this.state = store.getState()
        console.log(store.getState())
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleClick = this.handleClick.bind(this)
        //store变化(更新)后执行
        store.subscribe(this.handleStoreChange)
    }
    handleStoreChange(){
        //更新store.getState()值替换state里的数据
        this.setState(store.getState())
    }
    render(){
        return(
            <Fragment>
                <div style={{margin:'20px 10px'}}>
                    <Input 
                        value={this.state.inputValue} 
                        style={{width:'300px'}} 
                        onChange={this.handleInputChange}
                    />
                    <Button type="primary" onClick={this.handleClick}>提交</Button>
               </div>
               <List
                    style={{margin:'10px',width:'500px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item,index)=> (
                        <List.Item  onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>
                    )}
                />
            </Fragment>
        )
    }

    handleInputChange(e){
        //console.log(e.target.value)
       //修改store 传递修改
    //方法一 
    //    const action = {
    //        type:CHANG_INPUT_VALUE,
    //        value:e.target.value
    //    }

    //分离 方法二
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
    }

    handleClick(){
        // const action = {
        //     type:ADD_TODO_ITEM,
        // }
        const action = getAddItemAction()
        store.dispatch(action)
    }

    handleItemDelete(index){
        console.log(index)
        // const action = {
        //     type:DELETE_TODO_ITEM,
        //     index
        // }
        const action = getDeleteItemAction(index)
        store.dispatch(action)
    }
}

export default TodoList;